import {
  AfterContentChecked,
  AfterContentInit,
  AfterViewChecked,
  AfterViewInit, Component,
  DoCheck, Input,
  OnChanges,
  OnDestroy,
  OnInit,
} from '@angular/core';
import {LoggerService} from './logger.service';
import {SimpleChanges} from '@angular/core';

let nextId = 1;
export class ZBLive implements OnInit {

   constructor(private logger: LoggerService) { }

    // 实现OnInit 的 ngOnInit 方法
    ngOnInit(): void {
     this.logCutomInit('OnInit');
    }

    logCutomInit(msg: string) {
     this.logger.logMeesage(`# ${nextId++} ${msg}`);
    }

}

@Component({
  selector: 'zblive',
  template: '<p> 创建内容{{name}}</p>',
  styles: ['p {background: LightYellow; padding: 8px}'],
})
export class ZBLiveComponent extends ZBLive implements
  OnChanges, DoCheck, OnInit,
  AfterContentInit, AfterContentChecked,
  AfterViewInit, AfterViewChecked,
  OnDestroy {

  @Input() name: string;
  private verb = 'initialized';

   constructor(logger: LoggerService) {
     super(logger);
     const isname = this.name ? 'is' : 'is not';
     this.logCutomInit(`${this.name} ${isname} 创建控件`);
     }

     // 监听输入属性的变化
    ngOnChanges(changes: SimpleChanges): void {
    const changesMsgs: string[] = [];
    for (const propName in changes) {
      if (propName === 'name') {
        const name = changes['name'].currentValue;
        changesMsgs.push(`name ${this.verb} to "${name}"`);
      } else {
        changesMsgs.push(propName + ' ' + this.verb);
      }
    }
      this.logCutomInit(`OnChanges: ${changesMsgs.join('; ')}`);
      this.verb = 'changed'; // next time it will be a change
   }
   ngDoCheck(): void {
      this.logCutomInit(`DoCheck`);
   }
   ngAfterContentInit(): void  {
      this.logCutomInit(`AfterContentInit`);
   }

   ngAfterContentChecked(): void {
     this.logCutomInit(`AfterContentChecked`);
    }

   ngAfterViewInit() {
     this.logCutomInit(`AfterViewInit`);
   }


    ngAfterViewChecked() {
     this.logCutomInit(`AfterViewChecked`);
    }

    ngOnDestroy() {
     this.logCutomInit(`OnDestroy`);
    }

}

